<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PiHome | {{ title | capfirst }}</title>
    <link rel="shortcut icon" href="/static/img/icon.png">
    <meta content='width=device-width, initial-scale=1, maximum-scale=3, user-scalable=yes' name='viewport'>
    

    <!-- bootstrap 3.0.2 -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Jquery UI -->
    <link rel="stylesheet" href="/static/css/jQueryUI/jquery.ui.all.css" />
    <!-- font Awesome -->
    <link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="/static/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/static/css/AdminLTE.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/Pi.css" rel="stylesheet" type="text/css" />
    {% block css%}    
    {% endblock %}
    <!-- jQuery 2.0.2 -->
    <script src="/static/js/jquery.min.js"></script>    

    {% block on_ready %}  
    {% endblock %}  

</head>

<body class="skin-blue">
    <!-- header logo: style can be found in header.less -->
    <header class="header">
        <a href="{% url 'PiApp.views.dashboard' %}"class="logo">
            <!-- Add the class icon to your logo image or logo icon to add the margining -->
            PiHome
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <div class="navbar-right">
                <ul class="nav navbar-nav">
                    <li class="notifications-menu">
                        <a href="{% url 'PiApp.views.notification_view' %}">
                            <i class="fa fa-envelope"></i>
                            {% if NOTIFICATION.count != 0 %}
                            <span class="label label-danger">{{NOTIFICATION.count}}</span>
                            {% endif %}
                        </a>
                    </li>
                    {% block user-menu %}
                    {% endblock %}  
                </ul>
            </div>
        </nav>
    </header>
    <div class="wrapper row-offcanvas row-offcanvas-left">
        <!-- Left side column. contains the logo and sidebar -->
        <aside class="left-side sidebar-offcanvas">                
            <!-- sidebar: style can be found in sidebar.less -->
            <section class="sidebar">
                <!-- sidebar menu: : style can be found in sidebar.less -->
                <ul class="sidebar-menu">
                    {% block user-panel%} 
                    {% endblock %}

                    {% for item in PCILIST %}
                        {% if item.child %}
                        <li  class="treeview">
                            <a href="#">
                                <i class="fa {{item.font}}"></i> <span>{{item.title | capfirst}}</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">                            
                                {% for item2 in item.child %}
                                <li> 
                                    <a href="{{item2.url}}"><i class="fa fa-angle-double-right"></i>{{ item2.title }} </a>
                                </li>                      
                                {% endfor %}
                            </ul>
                        </li>   
                        {%else%}
                        <li>
                            <a href="{{item.url}}">
                                <i class="fa {{item.font}}"></i> <span>{{item.title | capfirst}}</span>
                            </a>
                        </li>
                        {% endif %}                     
                    {% endfor %}

                </ul>
            </section>
            <!-- /.sidebar -->
        </aside>

        <!-- Right side column. Contains the navbar and content of the page -->
        <aside class="right-side">                
            <!-- Content Header (Page header) -->
            <section class="content-header">
              <h1>
                {{ title | capfirst }}
            </h1>
            <ol class="breadcrumb">
                <!-- <li><a href="{% url 'PiApp.views.dashboard' %}">Home</a></li> -->
                {% for item in belong %}
                <li><a>{{ item | capfirst }}</a></li>
                {% endfor %}
                <li class="active">{{ title | capfirst }}</li>
            </ol>
            </section>

            <!-- Main content -->
            <section class="content" id="content" >
                {% block content %} 
                
                {% endblock %}
            </section><!-- /.content -->
        </aside><!-- /.right-side -->
    </div><!-- ./wrapper -->


    <div id="dialog" title="Alert"></div>
    <!-- jQuery UI 1.10.3 -->
    <script src="/static/js/jQueryUI/jquery-ui.js" type="text/javascript"></script>
    <script type="text/javascript" src="/static/js/jQueryUI/jquery.ui.dialog.js"></script>
    <!-- Bootstrap -->
    <script src="/static/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- AdminLTE App -->
    <script src="/static/js/AdminLTE/app.js" type="text/javascript"></script>
    {% block js %}  
        <!--这里插入具体页面引用的js库，或者js代码-->  
    {% endblock %}
</body>
</html>
